<template>
  <v-chart ref="myChart" v-bind="$attrs" autoresize :options="options"/>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  DataZoomComponent,
  DatasetComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { provide, ref } from 'vue';

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  DataZoomComponent,
  DatasetComponent
]);

provide(THEME_KEY, 'dark');
export default {
  name: 'LineChartX',
  components: {
    VChart
  },
  props: {
    options: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
    };
  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    cleanChart() {
      let myChart = this.$refs.myChart;
      if (myChart) {
        // 销毁图表实例
        myChart.clear();
      }
    },
    disposeChart() {
      let myChart = this.$refs.myChart;
      if (myChart) {
        // 销毁图表实例
        myChart.dispose();
        myChart = null; // 清空引用
      }
    }
  }
}
</script>

<style scoped>
.chart {
  height: 200px;
}
</style>
